<script setup lang="ts">
import { ref, onMounted, onUpdated } from 'vue'
import img1 from '/myLittleVader.jpg'

let props = defineProps<{
    isShowVal: boolean,
    text: string
}>()

let isShow = ref(props.isShowVal);

function imgLoad(url: string) {
    // Create new promise with the Promise() constructor;
    // This has as its argument a function
    // with two parameters, resolve and reject
    return new Promise(function (resolve, reject) {
        // Standard XHR to load an image
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.responseType = 'blob';
        // When the request loads, check whether it was successful
        request.onload = function () {
            if (request.status === 200) {
                // If successful, resolve the promise by passing back the request response
                resolve(request.response);
            } else {
                // If it fails, reject the promise with a error message
                reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
            }
        };
        request.onerror = function () {
            // Also deal with the case when the entire request fails to begin with
            // This is probably a network error, so reject the promise with an appropriate message
            reject(Error('There was a network error.'));
        };
        // Send the request
        request.send();
    });
}

function loadImg1() {

    // Get a reference to the body element, and create a new image object
    var dom1 = document.querySelector('#img-panel')!;
    var myImage = new Image();
    myImage.width = 200;
    myImage.height = 200;
    // Call the function with the URL we want to load, but then chain the
    // promise then() method on to the end of it. This contains two callbacks
    imgLoad(img1).then(function (response): any {
        // The first runs when the promise resolves, with the request.response
        // specified within the resolve() method.
        var imageURL = window.URL.createObjectURL(response);
        myImage.src = imageURL;
        dom1.appendChild(myImage);
        // The second runs when the promise
        // is rejected, and logs the Error specified with the reject() method.
    }, function (Error) {
        console.log(Error);
    });
}

function clickButton() {
    isShow.value = !isShow.value;
}

onMounted(() => {
    if (isShow.value == true) {
        loadImg1();
    }
})

onUpdated(() => {
    if (isShow.value == true) {
        loadImg1();
    }
})

</script>

<template>
    <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} Promise Test`" @click="clickButton">
    </div>
    <div v-if="isShow">
        <h1>Promise example</h1>
        <div>A:{{ text }}</div>
        <div>B:{{ props.text }}</div>
        <div>C:{{ $props.text }}</div>
        <p>Darth Vader image by <a href="https://www.flickr.com/photos/digital_stability/">Shawn Taylor</a>, published
            under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0
                Generic</a> license.</p>
        <div id="img-panel"></div>
    </div>
</template>

<style scoped></style>